<script setup>
import CenterCom from '@/components/center-com.vue'
import { provide, ref } from 'vue'

// 跨层传递普通数据
provide('theme-color', 'pink')

// 跨层传递响应式数据
const count = ref(100)
provide('count', count)

setInterval(() => {
  count.value++
},1000)

// 跨层传递函数，给子孙组件传递可以修改数据的函数
provide('changeCount', (newCount) => {
  count.value = newCount
})
</script>

<template>
  <div class="border1">
    <p>顶层组件-{{ count }}</p>
    <CenterCom></CenterCom>
  </div>
</template>

<style scoped>
  .border1 {
    border: 1px #ed453f solid;
    padding: 20px;
  }
</style>